<template>
	<van-popup v-model="show" position="right" :style="{ width: '80%', height: '100%' }">
		<div class="container">
			<van-form ref="formRef">
				<van-field required label="是否预约到店:">
					<template #input>
						<van-radio-group v-model="formData.appoint_arrive" direction="horizontal">
							<van-radio :name="1">是</van-radio>
							<van-radio :name="0">否</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<van-field label="新客/老客:">
					<template #input>
						<van-radio-group v-model="formData.cus_type" direction="horizontal">
							<van-radio :name="1">新客</van-radio>
							<van-radio :name="2">老客</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<van-field required disabled label="预约时长:">
					<template #input>
						{{ forMaterTime(formData.cart_duration) }}
					</template>
				</van-field>
				<van-field disabled required label="预约城市:">
					<template #input>
						{{ cityList.filter(v => v.id == formData.city_id)[0]?.label || "" }}
					</template>
				</van-field>
				<van-field required disabled label="预约门店:">
					<template #input>
						{{
							shopChildren.filter(v => v.dept_id == formData.dept_id)[0]?.dept_name ||
								""
						}}
					</template>
				</van-field>
				<van-field required disabled label="预约时间:">
					<template #input>
						{{ formData.appoint_time }}
					</template>
					<!-- <template #button>
						<van-button size="small" type="primary">选择预约时间</van-button>
					</template> -->
				</van-field>
				<van-field label="未成交原因:">
					<template #input>
						<van-radio-group v-model="formData.cause">
							<van-radio :name="1">售前原因</van-radio>
							<van-radio style="margin-top: 10px;" :name="2">售中原因</van-radio>
							<van-radio style="margin-top: 10px;" :name="3">门店原因</van-radio>
							<van-radio style="margin-top: 10px;" :name="4">客户原因</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<van-field
					label="未成交原因:"
					type="textarea"
					v-model="formData.detail"
					placeholder="请选择未成交原因"
				></van-field>
			</van-form>
			<div class="footer">
				<van-button size="small" type="default" @click="show = false">取消</van-button>
				<van-button size="small" :loading="loading" type="info" @click="onSubmit"
					>确认</van-button
				>
			</div>
		</div>
	</van-popup>
</template>

<script>
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
dayjs.extend(duration);
export default {
	data() {
		return {
			show: false,
			formData: {},
			cityList: [],
			shopChildren: [],
			loading: false
		};
	},
	created() {},
	methods: {
		open() {
			this.show = true;
		},
		setData(data) {
			this.formData = this.$TOOL.objCopy(data);
			this.form.appoint_arrive = 1;
			this.formData["appoint_time"] = data.appoint_date;
			this.getCityList();
			this.getDeptInfo();
			console.log(this.formData, "this.formData");
			const { biz_id } = this.formData;
			this.shopChildren = this.getBizRefData(biz_id, "shop_childs");
		},
		forMaterTime(totalMinutes) {
			if (totalMinutes) {
				const dur = dayjs.duration(totalMinutes, "minutes");
				if (dur.minutes()) {
					const formattedDuration = `${dur.hours()}小时${dur.minutes()}分钟`;
					return formattedDuration;
				} else {
					return `${dur.hours()}小时`;
				}
			} else {
				return "";
			}
		},

		async getCityList() {
			const { biz_id } = this.formData;
			this.$service.ad.citylists({ biz_id }).then(data => {
				let list = (data || []).map(v => ({ ...v, label: v.name, value: v.id }));
				this.cityList = list;
			});
		},
		async getDeptInfo() {
			const { dept_id } = this.formData;
			this.$service.dept.getDeptInfo({ dept_id }).then(data => {
				if (data.cart_duration > 0) {
					this.formData.cart_duration = data.cart_duration;
					this.cart_duration_disabled = true;
				}
			});
		},
		close() {
			this.show = false;
		},

		async onSubmit() {
			console.log("出发1");

			this.loading = true;
			const query = {
				...this.formData,
				appoint_date: dayjs(this.formData.appoint_date).format("YYYY-MM-DD"),
				update_type: 2
			};
			if (this.formData.appoint_date == "待定时间") {
				await this.$service.cart.update({
					...this.formData,
					appoint_date: "",
					update_type: 2
				});
			} else {
				await this.$service.cart.update(query).done(() => {
					this.loading = false;
					this.show = false;
				});
			}
			this.$emit("success");
		}
	}
};
</script>
<style scoped lang="scss">
::v-deep .van-form {
	height: calc(100% - 50px);
}
.container {
	height: 100%;
}

.footer {
	height: 50px;
	display: flex;
	padding: 0px 16px;
	justify-content: space-between;
	align-items: center;
}
</style>
